---
title: 'Shapes'
sidebarTitle: 'Shapes'
mode: 'wide'
---

## Description

    This is a basic example of how one might render nodes with custom shapes using Svelvet. Below you can
    see a variety of [Nodes](../components/node) with varying shapes. This is achieved simply within Svelvet
    by wrapping SVG elements within a Node component.

<iframe
	src="https://stackblitz.com/edit/shapes-sandbox?embed=1&file=src%2FApp.svelte&hideExplorer=1&hideNavigation=1&theme=dark&view=preview"
	style={{ width: '100%', height: '500px', border: '0', borderRadius: '15px' }}
></iframe>

Checkout the sandbox [here](https://stackblitz.com/edit/shapes-sandbox?file=src%2FApp.svelte).
